{extend name="article/base" /}

{block name="nav"}
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a>{$category_name}</a>
              {if ($sub_name)}
            <a>{$sub_name}</a>
              {/if}
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
{/block}

{block name="search"}
<div class="layui-card-body ">
    <form class="layui-form layui-col-space5">
        <div class="layui-inline layui-show-xs-block">
            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
        </div>
        <div class="layui-inline layui-show-xs-block">
            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
        </div>
        <div class="layui-inline layui-show-xs-block">
            <input type="text" name="keyword" placeholder="请输入标题关键字" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn" lay-submit="" lay-filter="search"><i
                    class="layui-icon">&#xe615;</i></button>
        </div>
    </form>
</div>
{/block}

{block name="operate"}
<div class="layui-card-header">
    <button class="layui-btn layui-btn-danger" onclick="delAll()">
        <i class="layui-icon"></i>批量删除
    </button>
    <button class="layui-btn layui-btn-warm" id="category">
        批量修改分类<i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <button class="layui-btn"
            onclick="xadmin.open('添加文章','/admin/article/add?category_id={$category_id}','','','full')">
        <i class="layui-icon"></i>添加文章
    </button>
</div>
{/block}

{block name="list"}
<style>
    .layui-table td, .layui-table th {
        min-width: 0px;
    }
</style>
<div class="layui-card-body layui-table-body layui-table-main">
    <table class="layui-table layui-form">
        <colgroup>
            <col width="5">
            <col width="50">
            <col width="100">
            <col width="400">
            <col width="30">
            <col width=150">
            <col width="20">
            <col width="50">
        </colgroup>
        <thead>
        <tr>
            <th>
                <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
            </th>
            <th>ID</th>
            <th>项目编号</th>
            <th>标题</th>
            <th>点击量</th>
            <th>更新时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {volist name="list['data']" id="vo"}
        <tr>
            <td>
                <input type="checkbox" name="id" value="{$vo.id}" lay-skin="primary">
            </td>
            <td>{$vo.id}</td>
            <td>{$vo.item_number}</td>
            <td>
                {if $vo.is_jump==1&&!empty($vo.hyperlink)}
                <a href="javascript:;"
                   onclick="xadmin.open('{$vo.title}','{$vo.hyperlink}','','','full')">
                    <span style="font-size: 6px;background-color: orangered;color: #FFFFFF;padding: 2px">超链接</span>
                    {$vo.title}
                </a>
                {else /}
                <a href="javascript:;"
                   onclick="xadmin.open('{$vo.title}','/admin/article/show?id={$vo.id}','','','full')">
                    {$vo.title}
                </a>
                {/if}
            </td>
            <td>{$vo.clicks}</td>
            <td>{$vo.update_time}</td>
            <td class="td-status" style="width: 20px">
                {if $vo.status==1}
                <span class="layui-btn layui-btn-normal layui-btn-mini ">已启用</span>
                {else /}
                <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">已停用</span>
                {/if}
            </td>
            <td class="td-manage">
                <a onclick="article_stop(this,'{$vo.id}')" href="javascript:;" title="修改状态">
                    <i class="layui-icon">&#xe601;</i>
                </a>
                <a title="编辑" onclick="xadmin.open('编辑','/admin/article/edit?id={$vo.id}','','','full')"
                   href="javascript:;">
                    <i class="layui-icon">&#xe642;</i>
                </a>
                <a title="删除" onclick="article_del(this,'{$vo.id}')" href="javascript:;">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        {/volist}
        </tbody>
    </table>
</div>
{/block}

{block name="page"}
<div class="layui-card-body ">
    <div class="page">
        {$list.render|raw}
    </div>
</div>
{/block}

{block name="js"}
<script>
    const url = {
            jsonList: '/admin/category/jsonList',
            modCategoryId: '/admin/category/modCategoryId',
            statusModUrl: '/admin/article/statusMod',
            delUrl: '/admin/article/del',
            delListUrl: '/admin/article/delList',
            searchUrl: '/admin/article/articlelist'
        },
        category_id = '{$category_id}'

    new Promise((resolve) => {
        layui.use(['laydate', 'form', 'dropdown'], () => {
            var laydate = layui.laydate;
            var form = layui.form;
            var dropdown = layui.dropdown
            // 监听全选
            form.on('checkbox(checkall)', function (data) {
                if (data.elem.checked) {
                    $('tbody input').prop('checked', true);
                } else {
                    $('tbody input').prop('checked', false);
                }
                form.render('checkbox');
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
            $.post(url.jsonList, '', (res) => {
                if (res.status === config.success) {
                    dropdown.render({
                        elem: '#category',
                        data: res.result,
                        id: 'category',
                        click: (obj) => {
                            var ids = [];
                            $('tbody input').each(function (index, el) {
                                if ($(this).prop('checked')) {
                                    ids.push($(this).val())
                                }
                            });
                            if (ids.length !== 0) {
                                layer.confirm('确认要修改分类吗？' + ids, (index) => {
                                    layer.close(index)
                                    resolve({categoryId: obj.id, ids})
                                })
                            } else {
                                layer.msg('请先选择文章', {icon: 5, time: 3000});
                            }
                        }
                    });
                } else {
                    layer.msg('加载分类失败', {icon: 5, time: 1000});
                }
            })

            form.on('submit(search)', data => {
                data = data.field
                if (data.start.length === 0 && data.end.length === 0 && data.keyword.length === 0) {
                    layer.msg('请选择时间或输入关键字', {icon: 5})
                    return false;
                }
                if (data.start.length === 0) {
                    data.start = '2022-01-01'
                }
                if (data.end.length === 0) {
                    data.end = (new Date().toLocaleString().replace(/\//g, '-'))
                }
                window.location.href = url.searchUrl +
                    `?category_id=${category_id}&
                    category_name={$category_name}&
                    start=${data.start}&
                    end=${data.end}&
                    keyword=${data.keyword}`;
                return false;
            })
        });
    })
        .then(obj => {
            let categoryId = obj.categoryId
            let ids = obj.ids
            $.post(url.modCategoryId, {categoryId, ids}, res => {
                if (res.status === config.success) {
                    layer.msg('修改分类成功', {icon: 1, time: 1000}, () => {
                        xadmin.father_reload();
                    });
                } else {
                    layer.msg(res.message, {icon: 2})
                }
            });
        })

    /*文章-停用*/
    function article_stop(obj, id) {
        layer.confirm('确认要修改状态吗？', function (index) {
            console.log(config.success)
            //发异步把用户状态进行更改
            $.post(url.statusModUrl, {id: id}, (res) => {
                if (res.status === config.success) {
                    if (res.result === config.off) {
                        $(obj).attr('title', '停用');
                        $(obj).find('i').html('&#xe62f;');
                        $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                        layer.msg('已停用!', {icon: 5, time: 1000});
                    } else {
                        $(obj).attr('title', '启用')
                        $(obj).find('i').html('&#xe601;');
                        $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                        layer.msg('已启用!', {icon: 1, time: 1000});
                    }
                } else {
                    layer.msg(res.message, {icon: 2})
                }
            })
        });
    }

    /*单文章-删除*/
    function article_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $.post(url.delUrl, {id: id}, (res) => {
                if (res.status === config.success) {
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!', {icon: 1, time: 1000});
                } else {
                    layer.msg(res.message, {icon: 2})
                }
            })
        });
    }

    /*批量文章-删除*/
    function delAll(argument) {
        var ids = [];
        // 获取选中的id
        $('tbody input').each(function (index, el) {
            if ($(this).prop('checked')) {
                ids.push($(this).val())
            }
        });
        var idsids = ids.toString();
        layer.confirm('确认要删除吗？' + ids, function (index) {
            //捉到所有被选中的，发异步进行删除
            $.post(url.delListUrl, {ids}, (res) => {
                if (res.status === config.success) {
                    layer.msg('删除成功', {icon: 1});
                    $(".layui-form-checked").not('.header').parents('tr').remove();
                } else {
                    layer.msg(res.message, {icon: 2})
                }
            })
        });
    }

</script>
{/block}
